<template>
  <el-form-item  :class="getClz()" :prop="opt.name" v-if="!opt.hide"  v-bind="opt.itemProps">
    <div slot="label" style="display: inline-block">{{opt.text}}<el-popover v-if="Boolean(opt.textLabel)" placement="top" trigger="hover"><div>{{opt.textLabel}}</div><i slot="reference" class="el-icon-warning" /></el-popover></div>
    <el-select v-model="data[opt.name]" style="width: 100%;"
               :placeholder="opt.props.disabled?'':opt.placeholder"
               :clearable="opt.props.clearable"
               v-bind="opt.props"
               @change="setValueMap"
    >
      <el-option :label="opt.hasNullOption.label" :value="opt.hasNullOption.value" v-if="opt.hasNull"></el-option>
      <el-option v-for="(option,index) in opt.options"
         :key="index"
         :label="option[opt.optionsLabel]"
         :value="option[opt.optionsValue]+''"
      />
    </el-select>
  </el-form-item>
</template>

<script>
  import extend from '../extend';
  let Log = ()=>{};

  export default {
    name: "FormSelect",
    mixins:[extend],
    dicts:[],
    data(){
      return {
        opt: {
          name:'',
          text:'',
          prop:'',
          itemProps:{},
          props:{
            disabled:false,
            filterable:true,
            clearable:true
          },
          hide:false,
          placeholder:'',
          hasNull:false,
          hasNullOption:{label:"请选择...",value:""},
          options:[],
          optionsLabel:'label',
          optionsValue:'value',
          formatter:(val)=>{
              if(this.opt.props.multiple){
                return val || [];
              }else{
                return val + '';
              }
          }
        }
      }
    },
    mounted(){
      this.initOptions();
      this.onChange = this.opt.onChange||Log;
      this.onOptions = this.opt.onOptions||Log;
    },
    methods:{
      setValue(val = ''){
        this.data[this.opt.name] = this.opt.formatter(val);
      },
      setValueMap(val){
        let opt = this.opt, values = opt.props.multiple ? val : [val];
        this.onOptions(this.data,this.column,opt.options.filter((v)=>{
            return values.indexOf(v[opt.optionsValue]+'')>-1
        }))
        this.onChange(this.data,this.column);
      }
    }
  }
</script>

<style scoped>
</style>
